{include file="public/_meta" /}
<title>我的团队</title>
<style type="text/css">
    .orgchart .second-menu-icon {
        transition: opacity .5s;
        opacity: 0;
        right: -5px;
        top: -5px;
        z-index: 2;
        color: rgba(68, 157, 68, 0.5);
        font-size: 18px;
        position: absolute;
    }
    .orgchart .second-menu-icon:hover {
        color: #449d44;
    }
    .orgchart .node:hover .second-menu-icon {
        opacity: 1;
    }
    .orgchart .node .second-menu {
        display: none;
        position: absolute;
        top: 0;
        right: -70px;
        border-radius: 35px;
        box-shadow: 0 0 10px 1px #999;
        background-color: #fff;
        z-index: 1;
    }
    .orgchart .node .second-menu .avatar {
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
    #chart-container{
        height: 100%;
        width: 100%;
    }
    html,body 
    {
        overflow: auto !important;
    }
</style>
</head>
<body class="pos-r">
<div class="page-container">
    <div class="row cl">
        <div class="col-xs-11 col-sm-12 ">

            <div class="wrap js-check-wrap">
                <div class="ibox-content">
                    <div id="chart-container">
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
{include file="public/_footer"/}
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
<link rel="stylesheet" href="/static/jqueryOrgChart/css/jquery.orgchart.css">
<link rel="stylesheet" href="/static/jqueryOrgChart/css/style.css">
<script type="text/javascript" src="/static/jqueryOrgChart/js/jquery.mockjax.min.js"></script>
<script type="text/javascript" src="/static/jqueryOrgChart/js/html2canvas.js"></script>
<script type="text/javascript" src="/static/jqueryOrgChart/js/jquery.orgchart.js"></script>
<script type="text/javascript">
    'use strict';
    (function($){
        $(function() {
            $.mockjax({
                url: '/orgchart/initdata',
                responseTime: 100,
                contentType: 'application/json',
                responseText: {
                    'id': "{$data['id']}",
                    'name': "名称:{$data['us_nickname']}",
                    // 'title': "账号:{$data['us_tel']}<br/>钱包:{$data['us_all_get']}<br/>类型:{$data['us_type']}<br/>收益:{$data['over']}",
                    'title': "账号:{$data['us_tel']}<br/>类型:{$data['us_type']}",
                   'relationship': {'children_num': "{$data['count']}"},
                    'children': {$array|raw}
            }
        });
            $('#chart-container').orgchart({
                'data' : '/orgchart/initdata',
                'depth': 2,
                'nodeTitle': 'name',
                'nodeContent': 'title',
                'createNode': function($node, data) {
                    var nodePrompt = $('<i>', {
                        'class': 'fa fa-info-circle second-menu-icon',
                        click: function() {
                            $(this).siblings('.second-menu').toggle();
                        }
                    });
                    var secondMenu = '<div class="second-menu"><img class="avatar" src="/static/jqueryOrgChart/img/avatar/' + data.id + '.jpg"></div>';
                    $node.append(nodePrompt).append(secondMenu);
                }
            });

        });

    })(jQuery);
</script>
</html>